<template>
  <div class="space-tag">
    <a-card title="图片标签分类">
      <v-chart :option="options" style="height: 320px; max-width: 100%" :loading="loading" />
    </a-card>
  </div>
</template>
<script setup lang="ts">
import 'echarts'
import VChart from 'vue-echarts'
import 'echarts-wordcloud'
import { computed, ref, watchEffect } from 'vue'
import { message } from 'ant-design-vue'
import { getSpaceTagAnalyzeUsingPost } from '@/api/spaceAnalyzeController.ts'

interface Porps {
  queryAll?: boolean
  queryPublic?: boolean
  spaceId?: string
}

const props = withDefaults(defineProps<Porps>(), {
  queryAll: false,
  queryPublic: false,
})
const dataList = ref<API.SpaceTagAnalyzeVO[]>([])
const loading = ref(false)
const fetchData = async () => {
  loading.value = true
  try {
    const res = await getSpaceTagAnalyzeUsingPost({
      queryAll: props.queryAll,
      queryPublic: props.queryPublic,
      spaceId: props.spaceId,
    })
    console.log(res.data)
    dataList.value = res.data
  } catch (e) {
    message.error(e)
  } finally {
    loading.value = false
  }
}
// 图表选项
const options = computed(() => {
  const tagData = dataList.value.map((item) => ({
    name: item.tag,
    value: item.count,
  }))
  return {
    tooltip: { trigger: 'item', formatter: (param: any) => `${param.name}: ${param.value}次` },
    series: [
      {
        type: 'wordCloud',
        gridSize: 10,
        sizeRange: [12, 50],
        rotationRange: [-90, 90],
        shape: 'circle',
        textStyle: {
          color: () =>
            `rgb(${Math.round(Math.random() * 255)},${Math.round(Math.random() * 255)},${Math.round(Math.random() * 255)})`,
        },
        data: tagData,
      },
    ],
  }
})
// 加载数据
watchEffect(() => {
  fetchData()
})
</script>

<style scoped></style>
